<template>
  <div class="account-type-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form 
          :model="dg.ps" 
          :inline="true" 
          @keyup.enter.native="getDgList(1)">
          <el-form-item>
            <el-input
              style="width: 150px"
              placeholder="报账项目名称"
              v-model="dg.ps.typeName"
            />
          </el-form-item>

          <!-- <el-form-item>
            <el-select
              v-model="dg.ps.roleIds"
              style="width: 150px"
              clearable multiple
              collapse-tags
              placeholder="报账角色选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->

          <!-- <el-form-item>
            <SelectCascade 
              :dataList="roleOptions"
              :tipText="'请选择报账角色'"
              :width="210" 
              @selItem="getSeledRole">
            </SelectCascade>
          </el-form-item> -->

          <!-- <el-form-item>
            <el-select
              v-model="dg.ps.moneyTypeId"
              style="width: 120px"
              clearable
              placeholder="关联金额类型">
              <el-option
                v-for="item in mTypesOptions"
                :key="item.id"
                :label="item.typeName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->

          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="getDgList(1)">
            查询
          </el-button>

          <el-button 
            type="primary" 
            icon="el-icon-plus" 
            @click="setAdupAccountTypeMd({state: true, type: 1})">
            新增报账项目
          </el-button>
        </el-form>
      </div>

      <TableSelfSet
        v-if="dg.columns.length > 0"
        :tbTitle="'报账类型'"
        :dgName="dg.dgName"
        :tbId="dg.tbName"
        :srcCols="dg.srcCols"
        :columns="dg.columns"
        @saveSet="saveTbSet"
      />
    </div>
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column 
        fixed="left" 
        type="index" 
        label="编号"
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{ row }">
          <template v-if="col.field == 'oper'">
            <el-button 
              type="text" 
              size="small" 
              @click="setAdupAccountTypeMd({state: true, type: 2, row: row})">
              修改
            </el-button>

            <el-button
              v-if="row.isDefault != 1" 
              type="text" 
              size="small" 
              @click="delAccountType(row)">
              删除
            </el-button>
          </template>

          <template v-else-if="col.field == 'roleIds'">
            <span>{{ getRoleName(row.roleIds) }}</span>
          </template>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-show="dg.total > 0"
      :total="dg.total"
      :page.sync="dg.ps.page"
      :limit.sync="dg.ps.rows"
      @pagination="getDgList()"
    />

    <AdupAccountType
      v-if="adupAccountTypeMd.state"
      :myData="adupAccountTypeMd"
      @myClick="setAdupAccountTypeMd"
      @reloadDg="getDgList()"
    />
  </div>
</template>
<script>
import DataGridBase from "@/views/mixins/DataGridBase";
import DataGridResize from "@/views/mixins/DataGridResize";
import TableSelfSet from "@/components/TableSelfSet";
import Pagination from "@/components/Pagination";

import SelectCascade from '@/components/SelectCascade';
import AdupAccountType from "./AdupAccountType";

import * as commonSer from "@/api/services/common.service";
import * as systemSer from "@/api/services/system.service";

export default {
  name: "AccountType",
  mixins: [DataGridBase, DataGridResize],
  components: { TableSelfSet, Pagination, SelectCascade, AdupAccountType },
  data() {
    let cols = [
      { label: "报账项目", field: "typeName", width: 200 },
      { label: "角色", field: "roleIds" },
      { label: "关联金额类型", field: "moneyTypeId.typeName", width: 200 },
      { label: "操作", field: "oper", width: 120 },
    ];
    return {
      dg: {
        dgName: "dg",
        tbName: "accountTypeTb",
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          // 过滤参数
          page: 1, rows: 20,
          // 类型名称
          typeName: "", 
          // // 管理角色id
          // roleIds: [], 
          // 关联金额类型
          // moneyTypeId: "", 
        },
      },
      // 添加/修改-报账类型-弹框
      adupAccountTypeMd: {state: false},
      
      // 关联金额类型-选择数据
      mTypesOptions: [],
      // 角色-选择数据
      roleOptions: [],

    };
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();

    that.init();
  },
  methods: {
    init(){
      // // 获取-关联金额类型-选择数据
      // commonSer.getMoneyTypeDict().then((res) => {
      //   this.mTypesOptions = res?.mTypes || [];
      // });

      // // 获取-报账角色-选择数据
      // commonSer.getRoleByDeptId({ deptId: "" }).then((res) => {
      //   this.roleOptions = res?.data || [];
      // });
    },
    // // 获取选中-角色数据
    // getSeledRole(e){
    //   this.U.setFmArr(this.dg.ps.roleIds, e.val);
    // },

    // 获取-角色文本
    getRoleName(roles) {
      if (!roles) return "";
      let arr = roles.split(',');

      let strArr = [];
      arr.forEach(it => { strArr.push(it.split('-')[1]); });

      return strArr.join(' | ');
    },

    /** 获取-分页列表数据 */
    getDgList(page) {
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);

      if(page) ps.page = page;
      systemSer.getReimList(ps).then(res => {
        if(res?.code != 1){
          U.qerror(res.msg);
        }else{
          let list = res?.data || [];
          list.forEach(it => { it.dgName = dg.dgName; });
          dg.list = list;
          dg.total = res?.count || 0;
        }
      });
    },

    // 显示/隐藏-报账类型-弹框
    setAdupAccountTypeMd(e) {
      const that = this, md = that.adupAccountTypeMd;

      if(!e.state){
        md.obj = null;
        md.state = false;
      }else{
        if(e.type == 1){// 添加
          
        }else if(e.type == 2){// 修改
          md.obj = e.row;
        }
        md.type = e.type;
        md.state = true;
      }
    },

    // 删除-报账类型
    delAccountType(row) {
      const that = this, U = that.U;

      U.qconfim(`确认删除报账类型【${row.typeName}】吗？`).then(r => {
        if(r){
          systemSer.deleteReimType({ delId: row.id }).then(res => {
            if(res?.code != 1){
              U.qerror(res.msg);
            }else{
              U.qsuccess(res.msg);

              that.getDgList();
            }
          });
        }
      });
    },
    

    
  },
};
</script>
<style lang="less" scoped>
.paddingLeft {
  padding-left: 24px;
}
</style>